<script setup>
import { ref, reactive, markRaw } from 'vue';
import A from '@/components/A.vue';
import B from '@/components/B.vue';
import C from '@/components/C.vue';

const tabList = reactive([
  {name: 'tab1', id: 0, com: markRaw(A) },
  {name: 'tab2', id: 1, com: markRaw(B) },
  {name: 'tab3', id: 2, com: markRaw(C) }
]);
const tabIndex = reactive({
  com: tabList[0].com
});

const handleTab = (val) => {
  tabIndex.com = tabList[val].com
}

</script>

<template>
  <div>
    <ul>
      <li v-for="(item, index) in tabList" :key="item.id" @click="handleTab(index)">{{ item.name }}</li>
    </ul>

    <keep-alive>
      <component :is="tabIndex.com"></component>
    </keep-alive>
    

  </div>
</template>

<style scoped>


</style>